<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="enterpriseId" label="序号" />
    <el-table-column prop="enterpriseName" label="企业名称" />
    <el-table-column prop="enterpriseillustrate" label="企业简介" />
    <el-table-column prop="enterpriseLogo" label="企业图片Logo">
      <template v-slot="scope">
        <img :src="scope.row.enterpriseLogo" style="width: 100px; height: 100px;">
      </template>
    </el-table-column>
    <el-table-column prop="industryName1" label="一级行业标签" />
    <el-table-column prop="industryName2" label="二级行业标签" />
    <el-table-column prop="provinceName" label="所在省份" />
    <el-table-column prop="cityName" label="市区" />
    <el-table-column prop="countyName" label="县区" />
    <el-table-column prop="fullAddress" label="详细地址" />
    <el-table-column prop="enterprisePhone" label="企业电话" />
    <el-table-column prop="unifiedsocialcode" label="统一社会信用代码" />
    <el-table-column prop="description" label="描述" />
    <el-table-column prop="deactivated" label="停用企业" />
    <el-table-column prop="head" label="负责人" />
    <el-table-column prop="financeHead" label="财务负责人" />
    <el-table-column prop="apartHead" label="分管负责人" />
    <el-table-column prop="myProperty" label="可查看人员" />
    <el-table-column prop="accountingunitName1" label="文件1" />
    <el-table-column prop="accountingunitName2" label="文件2" />
  </el-table>
  <!-- 分页信息 -->
  <table>
    <tr>
      <!-- 1. -->
      <td>
        <el-pagination v-model:current-page="form.pageindex" v-model:page-size="form.pagesize" :page-sizes="[1, 3, 5, 7]"
          :size="form.pagesize" :background="true" layout="total,slot, sizes" :total="form.PageCount" prev-text="上一页"
          next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          数据，每页显示{{ form.pagesize }}条数据，当前第1/{{
            form.pageindex
          }}页，共{{ form.TotalCount }}页。
        </el-pagination>
      </td>
      <!-- 2. -->
      <td>
        <el-pagination v-model:current-page="form.pageindex" v-model:page-size="form.pagesize" :page-sizes="[1, 3, 5, 7]"
          :size="form.pagesize" :background="true" layout="slot,prev, pager" :total="form.PageCount" prev-text="上一页"
          next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button @click="handleCurrentChange(1)">首页</el-button>
        </el-pagination>
      </td>
      <!-- 3. -->
      <td>
        <el-pagination v-model:current-page="form.pageindex" v-model:page-size="form.pagesize" :page-sizes="[1, 3, 5, 7]"
          :size="form.pagesize" :background="true" layout="next,slot, jumper" :total="form.PageCount" prev-text="上一页"
          next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button @click="handleCurrentChange(form.TotalCount)">尾页</el-button>
        </el-pagination>
      </td>
    </tr>
  </table>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { reactive, ref, onMounted } from 'vue'
import axios from 'axios';
// 分页查询条件信息
const form = reactive({
  PageCount: 0,
  TotalCount: 0,
  pageindex: 1,
  pagesize: 3
})
//分页
const handleSizeChange = (val: number) => {
  form.pagesize = val;
  EnterPriseList();  //显示方法

};
const handleCurrentChange = (val: number) => {
  form.pageindex = val;
  EnterPriseList(); //显示方法
};
// 显示信息
const tableData = ref([])
const EnterPriseList = () => {
  axios.post('http://localhost:5012/api/Sheep/EnterPriseList', form).then(res => {
    console.log(res.data)
    tableData.value = res.data.data.data
    form.PageCount = res.data.data.pageCount
    form.TotalCount = res.data.data.totalCount
  })
}
// 生命钩子
onMounted(() => {
  EnterPriseList();
})
</script>
<style scoped></style>